Forum PHP.pl

background-position
jak już napisałem niżej to nie kasuje ;p - idea jest taka sama plus link do wyników na google z wyświetloną własnością css
...


wszystko ładnie pięknie, tyle, że obrazek w podanym przykładzie można tak wy pozycjonować w samym css by wyglądał jak tło i się sam skalował ;p

co do pierwszego postu też nie do końca rozumiem gdyż nie wiem, w jakim sensie ma się to tło ruszać - jeśli będzie jako standardowe tło to na pewno nie da się skalować ;p - a reszta, czyli ruch to zmiana parametrów css z poziomu js...

co do samej płynności to jeśli przesówa się o jeden piksel to tu nie ma co tłumaczyć - jeśli o więcej niż jeden (przelatujący przez ekran obiekt w ciągu sekundy - 1000 zminan na tą sekundę to życzę powodzenia ;p) to trzeba zrobić tak jak filmy są zrobione, czyli powyżej 20 zmian na sekundę - najlepiej 25 zmian pozycji w ciągu sekundy - oko zauważy "płynny" ruch (IMG:style_emoticons/default/winksmiley.jpg)

tu jeszcze pasowało by napomnieć o optymalizacji tego, gdyż w niektórych przeglądarkach może to się ciąć... i teraz tak, przy zmianie własności w DOM przeglądarka zmiany renderuje od razu - dla przykładu i lepszego tłumaczenia nie tło a obrazek przesówamy, dla uproszczenia oparte to o position absolute - jeśli animujemy wiele elementów - uprośćmy do jednego obrazka bo liczbami zarzucę - przez zmianę np. przez zmianę marginesów lewego i top:
gdzie $el w js ma już zapamiętaną rozwiniętą część do tyli czyli $el=obiekt.style;
$el.marginLeft=$x;
$el.marginTop=$y;

to jak najbardziej odlecam - zwłaszcza, jeśli na stronie chcecie uzyskać np. efekt sniegu (wiele płatków, wiele obiektów, wiele zmian)
i tu dla jednego obrazka w dom 2 razy zrobiliśmy zmianę do jednej zmiany pozycji - przeglądarka renderuje to 2 razy zamiast raz - teraz to przemnóżcie sobie razy wszystkie zmiany * liczba elementów * liczba "klatek" - zdecydowanie zbyt często się renderuje to w przeglądarce ;p....

o wiele lepiej jest to wszystko policzyć w pierw, elementy/obrazki mają jakieś wygenerowane na początku id - identyfikator... i teraz najlepiej zrobić coś w tym stylu:
każdy element ma odpowiednik w tablicy, przy obliczeniach w petli zbieramy dane:
for(...){$styl[$i]=['#obr',$i,'{margin-left:',$vars.wspolrzedne[$i].$x,';margin-top:',$vars.wspolrzedne[$i].$y,';}'].join('');/*tą linijke skopiowałem - może malo mówi ale widać, że tu jest kenerowany fragment css dla obrazka o id=obr[cośtam] */}

po pętli np.:
$styl=$styl.join('');
$vars.style.firstChild.nodeValue=$styl;

gdzie w tym przykładzie pod $vars.style jest zapamiętany obiekt z drzewa dom wcześniej utworzony:
$vars.style=document.createElement('style');
$vars.style.appendChild(document.createTextNode(''));
document.getElementsByTagName('head')[0].appendChild($vars.style);

co do powyższych przykładów jeszcze ktoś wspomnieć mógł np o:
$vars.$img[$i].setAttribute('style', 'no tu ustawiamy pozycjonowanie'); - ta metoda jest lepsza od:
$el.marginLeft=$x;
$el.marginTop=$y;
gdyż dla danego obrazka jest tylko raz zmiana i raz jest generowana strona, ale gorsza od opisanej powyżej jeśli tych obrazków trochu na stronie dosyć czesto animujemy...


sorki - wyszło takie małe rozważanie przy okazji lekko o ptymalności animacji i płynności - powyższe jeśli to sa obrazki możesz też dynamicznie skalować, tło możesz przemieszczać, jednak nie możesz skalować - napisałem o wszystkim i o niczym bo pytania nie sprecyzowałeś ;p

Ten post edytował zegarek84 5.01.2010, 17:23:06